<template lang="pug">
.user_games
    .page_ps 影响用户个人推荐
    ul
        li(v-for="(prefer,appids) in UserDetailData?.game_ids"   )
            .game_cart
                .GameItemIdCard
                    GameItemIdCard(:appid="Number(appids)" )
                .rate_content
                    label(v-for="(cTtem,cIndex) in  [0,1,2,3,4]")
                        input(type="checkbox" @change="handel(Number(appids),cTtem)" :value="cTtem" :checked=" cIndex==0 ? true:cTtem < prefer+1" )
                .download_game(@click="DownloadGame(Number(appids))") Download
    .ToUpdateAppraise(@click="ToChangeGameAppraise") Update Appraise
</template>
<script setup lang="ts">

import GameItemIdCard from "../utils/game/GameItemIdCard.vue";
import {StoreUserDetail} from "../../store/userInfo";
import {onMounted, ref} from "vue";
import type {ResultInfo} from "../../utils/types/ResultInfo";
import {LogSuccess} from "../../utils/notification/Index";
import {GamePreferStarChange} from "../../reqApi/UserApi";
import {useRouter} from "vue-router";

const storeUserDetail = StoreUserDetail()
const UserDetailData = storeUserDetail.Get()


const router = useRouter()
const NewAppraise = ref<Map<number, number>>(new Map<number, number>())

const handel = (appid: number, prefer: number) => {
    setTimeout(() => {
        NewAppraise.value[appid as keyof typeof NewAppraise.value] = prefer
        NewAppraise.value.set(appid, prefer);
    }, 300)
    NewAppraise.value[appid as keyof typeof NewAppraise.value] = 0
    NewAppraise.value.set(appid, 0);

}


const DownloadGame = (appid: number) => {
    var link = document.createElement("a");
    link.download = 'Game' + appid + '.zip';
    link.href = "src/assets/zip/idea.zip";
    link.setAttribute('download', 'Game' + appid + '.zip'); // 文件的名称
    link.click();
    link.remove();

}


const ToChangeGameAppraise = () => {
    console.log(NewAppraise.value)
    GamePreferStarChange(NewAppraise.value).then(resp => {
        const result = resp.data as ResultInfo<any>
        LogSuccess(result.msg)
        if (result.success) {
            router.go(0);
        }
    })
}

onMounted(() => {
        NewAppraise.value = UserDetailData.value?.game_ids || new Map<number, number>
    }
)

</script>
<style lang="sass" scoped>

@import "../../assets/sass/user/games"

</style>
